<template>
  <div class="app-container">
    <el-collapse v-model="activeNames">
      <el-collapse-item title="展开/收回" name="1">
        <el-row>
          <el-col :span="24">
            <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
              <el-radio-button label="person">人员定位</el-radio-button>
              <el-radio-button label="car">车辆定位</el-radio-button>
            </el-radio-group>
            <el-row v-if="tabPosition=='person'">
              <el-col :span="8">
                身份：
                <el-select v-model="value" label="身份：" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                部门：
                <el-select v-model="value" placeholder="请选择" style="margin-bottom:20px">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-col>
              <el-col :span="8">
                姓名：
                <el-input
                  v-model="name"
                  placeholder="请选择"
                  size="small"
                  style="width:65%;margin-bottom:20px;"
                />
              </el-col>
              <el-col>
                选择时间:
                <el-date-picker
                  v-model="personDate"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="12">
                车牌号：
                <el-input
                  v-model="name"
                  placeholder="请选择"
                  size="small"
                  style="width:65%;margin-bottom:20px;"
                />
              </el-col>
              <el-col>
                选择时间:
                <el-date-picker
                  v-model="carDate"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-col>
            </el-row>
            <div style="margin-top:40px;padding-left:20%">
              <el-button type="primary">查询</el-button>
              <el-button>重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import crudRtl from '@/api/pod/rtl'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import rrOperation from "@crud/RR.operation";
// import crudOperation from "@crud/CRUD.operation";
// import udOperation from "@crud/UD.operation";
// import pagination from "@crud/Pagination";

const defaultForm = {
  id: null,
  createTime: null,
  updateTime: null,
  createBy: null,
  updateBy: null,
  identity: null,
  name: null
}
export default {
  name: 'Rtl',
  // components: { pagination, crudOperation, rrOperation, udOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '实时定位',
      url: 'api/rtl',
      sort: 'id,desc',
      crudMethod: { ...crudRtl }
    })
  },
  data() {
    return {
      permission: {
        add: ['admin', 'rtl:add'],
        edit: ['admin', 'rtl:edit'],
        del: ['admin', 'rtl:del']
      },
      tabPosition: 'person',
      activeNames: ['1'],
      personDate: [new Date(2020, 5, 20, 10, 10), new Date(2020, 5, 21, 10, 10)],
      carDate: [new Date(2020, 5, 20, 10, 10), new Date(2020, 5, 21, 10, 10)],
      rules: {
        createTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ],
        updateTime: [
          { required: true, message: '更新时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 获取数据前设置好接口地址
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>
</style>
